<template>
	<div class="map-view-rd">
		<div class="tab-container-item" v-if="itemp == 'map'">
			<div class="bd-page-container" style="width:100%;height:100%;height:100vh;">
				<baidu-map class="map" ak="teZrervALuSL6KsGFvQs5iVh3NmxzMB1" :center="center" :zoom="zoom" @ready="handler" style="width:100%;height:100%;height:100vh;">
					<bm-marker :position="{lng: pjd.mlng, lat:  pjd.mlat}" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: 'http://fc.wzgaolaozhuang.com/ad/location-tag.png', size: {width: 300, height: 157}}">
						<bm-label :content="pjd.address" :labelStyle="{color: '#fff', fontSize : '12px', borderColor: '#292c46',background: '#292c46',borderRadius:'10px',padding:'2px 5px'}" :offset="{width: -24, height: 50}"/>
				  </bm-marker>
				</baidu-map>
			</div>
		</div>
	</div>
</template>

<script>
	import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
	import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
	import BmLabel from 'vue-baidu-map/components/overlays/Label.vue'
	import {getPJDetail} from '__api';
	export default{
		name: 'protoitem-view',
		components:{BaiduMap,BmMarker,BmLabel},
		created(){
			this.$nextTick(function(){
				this.itemp = this.$route.query.view;
				this.pjd.slng = this.$route.query.slng
				this.pjd.slat = this.$route.query.slat
				this.pjd.mlng = this.$route.query.mlng
				this.pjd.mlat = this.$route.query.mlat
				this.pjd.address = this.$route.query.address
				this.getProductData();
			})
		},
		data(){
			const self = this;
			return{
				pjd:{slng:'',slat:'',mlng:'',slat:'',address:''},
				itemp:'',
				center: {lng: 0, lat: 0},  //经纬度
      			zoom: 17　 //地图展示级别
			}
		},
		methods:{
			getProductData(){
				// this.$loading();
				// getPJDetail({id: this.$route.query.id}).then( res => {
				// 	let pjd = res.deal_info;
				// 	this.$loading.end();
				// })

			},
			handler ({BMap, map}) {
		      console.log(BMap, map)
		      this.center.lng =this.pjd.slng
		      this.center.lat =this.pjd.slat
		      this.zoom = 17
		    }
		}
	};

</script>

